<template>

  <section id="orderDetailMain"  class="order-detail" v-show="isShow">
      <div class="order-detail-layer " :class="{'order-cancel' :orderDetail.state == 2 || orderDetail.state == 5  }">

        <h5 class="order-detail-title pos-rel">{{orderDetail.storeName}}</h5>

        <div class="order-detail-main pos-rel">
          <i  v-if="orderDetail.state != 3  && orderDetail.state != 4"  class="ib common-img img-watermark order-watermark" :class="{' img-watermark-cancel ' : orderDetail.state == 2 || orderDetail.state == 5 }"></i>
          <div class="order-detail-item">
            <label>预约时间:</label>
            <span>{{getStarTime}} - {{getEndTime}}</span>
          </div>

          <div class="order-detail-item">
            <label>预约人数:</label>
            <span>{{orderDetail.peopleCount}}人</span>
          </div>

          <div class="order-detail-item"  v-if="orderDetail.state == 3 ||  orderDetail.state == 4 ">
            <label>健身时长:</label>
            <span>{{orderDetail.buildTime / 60}}分钟</span>
          </div>

          <div class="order-detail-item" v-if="orderDetail.state == 3 ||  orderDetail.state == 4 ">
            <label>参与人数:</label>
            <span>{{orderDetail.peopleCount}}人</span>
          </div>

          <order-code-component  :reversal="false"  v-if="orderDetail.state != 3  && orderDetail.state != 4" />

        </div>

        <!-- 同行 -->
        <div class="order-peer text-center" v-if="orderDetail.state == 3 ||  orderDetail.state == 4 ">
          <h5>同行小伙伴</h5>
          <ul class="order-peer-list">
            <li class="ib" v-for="u in userList">
              <div class="bg-img-clip user-friend-head" :style="{backgroundImage:`url(${u.userIcon})`}"></div>
              <h5 class="text-center text-ellipsis  mt5 text-center">{{u.userName}}</h5>
            </li>
          </ul>
        </div>


        <order-code-component  :reversal="true"  v-if="orderDetail.state == 3 ||  orderDetail.state == 4 "/>


        <!-- 取消预约 -->
        <h5 class="order-detail-cancel" v-if="orderDetail.state == 2 ||  orderDetail.state == 5">
          您的预约已于 {{orderDetail.getCancelTime}} 取消
        </h5>



        <!-- 地址描述 -->
        <div v-if="orderDetail.state == 1 || orderDetail.state == 0" class="order-address">

          <h3 class="order-address-label">地址</h3>
          <p class="order-address-content">
            {{orderDetail.address}}   <a @click="showLocation()"  href="javascript:void(0)" class="block text-accent">点击查看地图</a>
          </p>

          <h3 class="order-address-label">注意事项</h3>
          <div class="order-address-content" v-html="orderDetail.attentions">
          </div>

        </div>

      </div>

    <div class="order-btn-layer">
      <button @click="onPay()" class="btn btn-primary btn-block"  v-if="orderDetail.state == 0">立即支付</button>
      <div  >

        <!-- 取消 -->
        <button  @click="cancelOrder()" class="btn btn-outline mt10 btn-primary btn-block" v-if="orderDetail.state == 1 || orderDetail.state == 0">取消预约</button>
        <p class="order-detail-cancel-text mt10  text-center" v-if="orderDetail.state == 1">9月12日 6:30后取消，不支持退款</p>

      </div>
    </div>

    <!-- 结束倒计时 -->
    <div class="order-time-down" v-if="orderDetail.state == 0">
      <i class="iconfont icon-alter mr5"></i>
      <span>您的订单未支付,订单将于{{seckillMsg}}后 自动取消</span>
    </div>

  </section>
</template>
<style lang="scss" scoped>
  @import "../css/order-detail";
</style>

<script type="text/javascript" src="../js/orderDetail"></script>


